import React from 'react';
import { connect } from 'react-redux';
import { Button } from 'antd';

import * as TodoAction from '../../actions/TodoAction';
import * as UserAction from '../../actions/UserAction';

const Todo = (props) => {
  // 添加数字
  const add = () => {
    const randomNum = Math.floor(Math.random() * 100);
    props.dispatch(TodoAction.addTodo(randomNum));
  };
  // 是否过滤
  const filter = () => {
    props.dispatch(TodoAction.toggleFilter());
  };
  // 登陆
  const login = () => {
    props.dispatch(UserAction.login({ username: '123', password: '1234' }));
  };
  // 登出
  const logout = () => {
    props.dispatch(UserAction.logout());
  };
  return (
    <div>
      {/*<Button onClick={ login }>登陆</Button>*/}
      {/*<Button onClick={ logout }>登出</Button>*/}
      {/*<hr />*/}
      <Button onClick={ add }>添加</Button>
      <Button onClick={ filter }>过滤>50</Button>
      <h1>{ props.list.map(item => item.text).join('、') }</h1>
    </div>
  );
};

function mapStateToProps(state) {
  let { list, isFilter } = state.todo;
  if (isFilter) {
    list = list.filter(item => item.text > 50);
  }
  return {
    list,
  };
}

export default connect(mapStateToProps)(Todo);